<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频播放器</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <h2>功能配置</h2>
    <div>
        <label for="input_fontFamily">输出声卡:</label>
        <select id="select_device">
        </select>
        <button id="get_deivce_button" onclick="get_deivce()">🔃刷新声卡列表</button>
    </div>
    <div>
        <label for="input_speed">播放速度:</label>
        <input class="input_config_common" type="text" id="input_speed" placeholder="请输入播放速度比例，例如原速度为：1">
        <label for="input_audio_interval">音频间隔:</label>
        <input class="input_config_common" type="text" id="input_audio_interval" placeholder="请输入随机音频间隔的最小值（秒），例如：0.5">
    </div>
    <div>
        <label>启用随机播放:</label>
        <input id="input_random_speed_enable" type="checkbox" value="1" />
        <label for="input_random_speed_min">速度下限（比例）:</label>
        <input class="input_config_common" type="text" id="input_random_speed_min"
            placeholder="请输入随机播放速度比例的最小值，例如减速为：0.8">
        <label for="input_random_speed_max">速度上限（比例）:</label>
        <input class="input_config_common" type="text" id="input_random_speed_max"
            placeholder="请输入随机播放速度比例的最大值，例如加速为：1.3">
    </div>
    <div>
        <label>启用随机音频间隔:</label>
        <input id="input_random_audio_interval_enable" type="checkbox" value="1" />
        <label for="input_random_audio_interval_min">音频间隔下限（秒）:</label>
        <input class="input_config_common" type="text" id="input_random_audio_interval_min"
            placeholder="请输入随机音频间隔的最小值（秒），例如最小间隔为：0.1">
        <label for="input_random_audio_interval_max">音频间隔上限（秒）:</label>
        <input class="input_config_common" type="text" id="input_random_audio_interval_max"
            placeholder="请输入随机音频间隔的最大值（秒），例如最大间隔为：3">
    </div>
    <div>
        <label for="textarea_audio_json">播放音频数据：</label>
        <br>
        <textarea class="textarea_config_common" id="textarea_audio_json" name="textarea_audio_json" rows="4"
            cols="50">{"voice_path": "out\\2.mp3", "content": "out\\2.mp3",  "random_speed": {"enable": false, "max": 1.3, "min": 0.8}, "speed": 1}</textarea>
        <button id="play_button" onclick="play()" style="position: relative; bottom: 20px;">📤发送数据</button>
    </div>
    <div>
        <label>启用web字幕打印机:</label>
        <input id="input_captions_printer_enable" type="checkbox" value="1" />
        <label for="input_captions_printer_min">API地址:</label>
        <input class="input_config_common" type="text" id="input_captions_printer_api_ip_port"
            placeholder="web字幕打印机服务的API地址" style="width: 300px;">
    </div>
    <div>
        <button id="save_button" onclick="save_config()">📄保存配置</button>
        <button id="run_button" onclick="run()">🔁重新运行</button>
    </div>
    <div style="margin: 10px 0px;">
        <button id="pause_stream_button" onclick="pause_stream(1)">⏸︎暂停播放</button>
        <button id="resume_stream_button" onclick="pause_stream(0)">▶️恢复播放</button>
        <button id="skip_current_stream_button" onclick="skip_current_stream()">⏭跳过当前播放</button>
        <button id="clear_list_button" onclick="clear_list()">🗑清空播放列表</button>
    </div>
    <div style="margin: 10px 0px; position: fixed; top: 1%; right: 1%;">
        <h2>播放列表</h2>
        <textarea id="textarea_audio_list" rows="20" cols="50"></textarea>
        <br>
        <button id="get_list_button" onclick="get_list()">刷新播放列表</button>
    </div>
    <div>
        <h2>API</h2>
        <section>
            <h3>添加音频数据到播放列表</h3>
            <p>使用 POST 请求到以下 URL：</p>
            <code>http://127.0.0.1:5600/play</code>
            <p>请求体（json字符串）：</p>
            <pre class="code-block">
                <code>
{
    "voice_path": "out\\2.mp3",
    "content": "音频文本内容",
    "random_speed": {
        "enable": false,
        "max": 1.3,
        "min": 0.8
    },
    "speed": 1,
    "insert_index": 0
}
                </code>
            </pre>
            <p>参数说明：</p>
            <ul>
                <li><strong>voice_path：</strong> 音频文件路径</li>
                <li><strong>content：</strong> 音频文本内容</li>
                <li><strong>random_speed enable：</strong> 启用随机播放功能（非必填，不填默认读取本地配置）</li>
                <li><strong>random_speed max：</strong> 随机播放的最大速度（非必填，不填默认读取本地配置）</li>
                <li><strong>random_speed min：</strong> 随机播放的最小速度（非必填，不填默认读取本地配置）</li>
                <li><strong>speed：</strong> 播放速度（非必填，不填默认读取本地配置）</li>
                <li><strong>insert_index：</strong> 数据插入列表的索引值（非必填，不填默认末尾插入）</li>
            </ul>
            <p>返回数据：</p>
            <pre class="code-block">
                <code>
// 成功返回
{"code": 200, "message": "添加音频信息成功！"}
                </code>
            </pre>
            <pre class="code-block">
                <code>
// 失败返回
{"code": -1, "message": "添加音频信息失败！{e}"}
                </code>
            </pre>
        </section>
        <section>
            <h3>暂停播放</h3>
            <p>使用 GET 请求到以下 URL：</p>
            <a href="http://127.0.0.1:5600/pause_stream" target="_blank">http://127.0.0.1:5600/pause_stream</a>
        </section>
        <section>
            <h3>恢复播放</h3>
            <p>使用 GET 请求到以下 URL：</p>
            <a href="http://127.0.0.1:5600/resume_stream" target="_blank">http://127.0.0.1:5600/resume_stream</a>
        </section>
        <section>
            <h3>跳过当前播放</h3>
            <p>使用 GET 请求到以下 URL：</p>
            <a href="http://127.0.0.1:5600/skip_current_stream" target="_blank">http://127.0.0.1:5600/skip_current_stream</a>
        </section>
        <section>
            <h3>清空播放列表</h3>
            <p>使用 GET 请求到以下 URL：</p>
            <a href="http://127.0.0.1:5600/clear" target="_blank">http://127.0.0.1:5600/clear</a>
        </section>
        <section>
            <h3>获取播放列表</h3>
            <p>使用 GET 请求到以下 URL：</p>
            <a href="http://127.0.0.1:5600/get_list" target="_blank">http://127.0.0.1:5600/get_list</a>
        </section>
    </div>
    <div>
        <h2>配置</h2>
        <section>
            <pre class="code-block">
                <code>
{
    "device_index": 5,
    "random_speed": {
        "enable": false,
        "max": 1.3,
        "min": 0.8
    },
    "speed": 1,
    "captions_printer": {
      "enable": true,
      "api_ip_port": "http://127.0.0.1:5500"
    }
}
                </code>
            </pre>
            <p>配置说明：</p>
            <ul>
                <li><strong>device_index：</strong> 声卡设备索引值</li>
                <li><strong>random_speed enable：</strong> 启用随机播放功能</li>
                <li><strong>random_speed max：</strong> 随机播放的最大速度</li>
                <li><strong>random_speed min：</strong> 随机播放的最小速度</li>
                <li><strong>speed：</strong> 播放速度</li>
                <li><strong>captions_printer enable：</strong> 启用对接web字幕打印机</li>
                <li><strong>captions_printer api_ip_port：</strong> web字幕打印机服务的API地址</li>
            </ul>
        </section>
    </div>
    <script src="js/index.js"></script>
</body>

</html>